<template>
  <div style="display: flex; justify-content: space-around">
    <div class="swiper">
      <div
        class="slider-container"
        :style="{ transform: `translateY(-${currentIndex * slideWidth}px)` }"
      >
        <div v-for="(item, index) in swiperData" :key="index" class="swiperItem" ref="swiperItem">
          <div class="swiperImgBox">
            <img :src="$t(`messages.map.caseList[${index}].image`)" alt="" />
            <div class="imgSize">
              <div class="title2">{{ $t(`messages.map.caseList[${index}].title`) }}</div>
              <div class="size">
                {{ $t(`messages.map.caseList[${index}].detils`) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper2">
      <div
        class="slider2-container"
        :style="{ transform: `translateY(-${currentIndex2 * slideWidth2}px)` }"
      >
        <div
          :class="currentIndex2 == index ? 'swiper-slide-active' : 'swiper-slide'"
          v-for="(item, index) in swiperData2"
          :key="index"
          @click="rigthFn(index)"
        >
          <div class="swiperItem2" ref="swiperItem2">
            <img :src="$t(`messages.map.caseList2[${index}].image`)" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { toRaw, ref, reactive, onMounted } from 'vue'
import { buildSlideshow } from '@/http/api/store.js'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'

const currentIndex = ref(0)
const slideWidth = ref(810)
const currentIndex2 = ref(0)
const slideWidth2 = ref(190)
onMounted(() => {
  getData()
})
let timeFn = ''
let timeFn2 = ''
let swiperItem = ref(null)
let swiperItem2 = ref(null)
const rigthFn = (index) => {
  slideWidth.value = swiperItem.value[0].offsetHeight + 0.5
  slideWidth2.value = swiperItem2.value[0].offsetHeight
  clearInterval(timeFn)
  clearTimeout(timeFn2)
  if (!swiperData.value.length - 1 >= index) {
    swiperData2.value.splice(0, 5)
    swiperData2.value.push(...swiperData.value)
  }
  currentIndex.value = swiperData.value.length - 1 >= index ? index : 0
  currentIndex2.value = swiperData.value.length - 1 >= index ? index : 0
  timeFn2 = setTimeout(() => {
    timeFn = setInterval(() => {
      a()
    }, 3000)
  }, 1000)
}
let pageData = reactive({
  page: 1,
  size: 50
})
timeFn = setInterval(() => {
  a()
}, 3000)
// 定时
const a = () => {
  slideWidth.value = swiperItem.value[0].offsetHeight
  slideWidth2.value = swiperItem2.value[0].offsetHeight
  currentIndex.value = swiperData.value.length - 3 >= currentIndex.value ? currentIndex.value + 1 : 0
  currentIndex2.value = swiperData.value.length - 3 >= currentIndex2.value ? currentIndex2.value + 1 : 0
}

let swiperData = ref([])
let swiperData2 = ref([])
const getData = async () => {
  let res = await buildSlideshow(pageData)
  Zh.messages.map.caseList = res.res.map((item) => {
    return {
      title: item.titleZh,
      detils: item.detilsZh,
      image: item.imageZh
    }
  })
  En.messages.map.caseList = res.res.map((item) => {
    return {
      title: item.titleEn,
      detils: item.detilsEn,
      image: item.imageEn
    }
  })

  swiperData.value = res.res
  swiperData2.value = JSON.parse(JSON.stringify(swiperData.value))
  swiperData2.value.push(...swiperData.value)
  Zh.messages.map.caseList = swiperData2.value.map((item) => {
    return {
      title: item.titleZh,
      detils: item.detilsZh,
      image: item.imageZh
    }
  })
  En.messages.map.caseList2 = swiperData2.value.map((item) => {
    return {
      title: item.titleEn,
      detils: item.detilsEn,
      image: item.imageEn
    }
  })
}
</script>

<style scoped lang="scss">
.slider-container {
  transition: transform 0.5s ease-in-out;
}
.slider2-container {
  transition: transform 0.5s ease-in-out;
}
.slider-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #000;
}

.swiper2 {
  margin-top: 30px;
  height: 800px;
  margin-right: 45px;
}
.swiper-slide {
  opacity: 0.5 !important;
}
.swiper-slide-active {
  opacity: 1 !important;
}
.slider2-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper {
  width: 1300px;
  height: 800px;
  margin: 0;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

.swiperItem {
  height: 800px;
  width: 1300px;
  img {
    width: 400px;
    height: 260px;
  }
}
.swiper2 {
  height: 800px;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.swiperItem2 {
  width: 240px;
  height: 220px;
  padding: 30px 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper1 {
  padding: 30px;
}
.swiperImgBox {
  width: 100%;
  height: 100%;
  position: relative;
  img {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    z-index: -1;
  }
  .imgSize {
    position: absolute;
    right: 0px;
    top: 0px;
    background: rgba($color: #000000, $alpha: 0.8);
    width: 500px;
    padding: 0 0 0 20px;
  }
}

::v-deep(.swiper-pagination-bullet) {
  //修改分页器圆点大小
  width: 8px;
  height: 8px;
  background-color: #fff;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
::v-deep(.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
  // 分页器远点之间的距离
  margin: 0 10px;
}

::v-deep(.swiper-button-prev),
::v-deep(.swiper-button-next) {
  display: none;
}
.imgSize {
  height: 250px;
  .title {
    font-size: 38px;
    font-weight: bold;
    color: #ffdd00;
  }
  .size {
    width: 450px;
    color: #ffffff;
    white-space: pre-wrap; /* 保留空白符序列，但是当到达容器边界时进行换行 */
    overflow-wrap: break-word; /* 在长单词或URL地址内部进行换行 */
    word-break: break-all; /* 允许在任意字符间断开（用于CJK文字等） */
  }
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>